---
title: Tailwind CSS Image - Components Library @David UI
description: Display images effectively with Tailwind CSS image components. Responsive and customizable layouts ensure seamless integration into any design.
github: Image
prev: docs/react/inputs
next: docs/react/Image-group
---

# Tailwind CSS Image

Enhance image presentation with David UI’s image component. Built with Tailwind CSS, it offers responsiveness, styling options, and support for advanced layouts. 

Explore our easy-to-integrate component examples to create compelling image displays in your designs.

---

## Basic Image Component

Display an image in a centered, scrollable grid layout. This responsive design adjusts effortlessly to various screen sizes, providing an optimal viewing experience on all devices.

<PreviewWithCode relativePath="image/image-demo.tsx" language="html" />

---

## Image with Rounded Corners

Explore how to create images with smooth, rounded corners. This simple styling adds a touch of elegance and softness to your design.

<PreviewWithCode relativePath="image/image-with-rounded-corners.tsx" language="html" />

---

## Circular Image

Use `rounded-full` class to round the corners of the image into a circle. This effect will be most noticeable if the image is square; otherwise, the image will look elliptical.

<PreviewWithCode relativePath="image/circular-image.tsx" language="html" />

---

## Image with Shadow

Enhance your image with a depth-adding shadow by applying the `shadow-xl` and `shadow-black/25` classes. This subtle black shadow with reduced opacity helps the image stand out against its background.

<PreviewWithCode relativePath="image/image-with-shadow.tsx" language="html" />

---

## Image with Caption

Incorporate a caption below your image to add descriptive context. This design is excellent for providing information or storytelling alongside visuals.

<PreviewWithCode relativePath="image/image-with-caption.tsx" language="html" />

---

## Image with Blurred Caption

Apply a semi-transparent white background with a blur effect (backdrop-blur-md) to the caption for improved readability over the image. Additional border, padding, and shadow elements elevate the overall design and clarity.

<PreviewWithCode relativePath="image/image-with-blurred-caption.tsx" language="html" />
